


<template>
  <header class="header">
      <div class="header-left">
          <i class="fa fa-chevron-left" 
          v-on:click="clickLeft"
          v-if="showleft"></i>
          <span class="header-left-set"
          v-if="showleftSon"
          >设置</span>
      </div>
      <div class="header-title">
        {{title}}
      <slot name="c"></slot>        
      </div>
      <div class="header-right">
        <slot name="right"></slot>
      </div>
  </header>



</template>
<script>
export default {
  props:['title','showleft','showleft-son'],
 
  methods:{
    clickLeft(e){
      this.$emit('faleft',e)
    }
  }
  
}


</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.header{
  display: flex;
  justify-content: space-around;
  // width: 100%;
  // height: px2rem(129);
  text-align: center;
  &-title{
    // display: inline-block;
    flex: 3;
    color: $basic-color;
    font-size: px2rem(34);
    @include upDownCenter(px2rem(88));
  }
  &-left{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    @include upDownCenter(px2rem(88));
    i{
      font-size: 1.5rem;
      color: #a2a3a8;
    }
    &-set{
      margin-left: px2rem(16);
      font-size: 1.5rem;
      color: #333333;
    }
  }
  &-right{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    @include upDownCenter(px2rem(88));
    i{
      font-size: 1.5rem;
      color: #a2a3a8;
      margin: 0 5px;
    }

  }
}
</style>

